<template>
  <div
    style="flex:1"
    class="container"
  >
    <head title="发现" :back="false">
      <div class="title" slot="left" @leftClick="toggleSidebar">
        <image style="width: 38px;height: 38px" :src="`root:img/${theme}/head/sidebar@2x.png`"></image>
      </div>
    </head>
      <wxc-tab-page
        class="tab-page"
        ref="wxc-tab-page"
        :tab-titles="tabTitles"
        :tab-styles="tabStyles"
        :title-use-slot="true"
        :wrap-bg-color="theme === 'day' ? '#ffffff':'rgba(29,29,29,1)'"
        :tab-page-height="tabPageHeight"
        @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected"
      >
        <div
          slot="tab-title-0"
          class="tab-item"
        >   <text
            :class="[this.tab(0)]"
            class="tab-text"
          >DAPP</text>
          <div  class="border-cell"  :class="[this.tab_border(0)]"></div>
        </div>
        <div
          slot="tab-title-1"
          class="tab-item"
        ><text
            :class="[this.tab(1)]"
            class="tab-text"
          >公告</text>
          <div  class="border-cell"  :class="[this.tab_border(1)]"></div>

          </div>
        <div
          slot="tab-title-2"
          class="tab-item"
        ><text
            :class="[this.tab(2)]"
            class="tab-text"
          >咨询</text>
          <div  class="border-cell"  :class="[this.tab_border(2)]"></div>
          </div>
        <list
          v-for="(v,index) in tabList"
          :key="index"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }"
        >
          <cell>
            <wxc-pan-item
              :ext-id="'1-' + (v)"
              url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
              @wxcPanItemPan="wxcPanItemPan"
            >
             <page-one></page-one>
            </wxc-pan-item>
          </cell>
        </list>
      </wxc-tab-page>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  padding-bottom: 140px;
}
.border_bottom {
  width: 750px;
  height: 1px;
  background-color: rgba(233, 233, 233, 1);
}
.main {
  flex: 1;
  background-color: #ffffff;
}
.tab-text {
  width: 210px;
  height: 58px;
  color: rgba(154, 156, 164, 1);
  font-size: 28px;
  line-height: 60px;
  text-align: center;
  margin-left: 20px;
  border-radius: 8px;
}
.tab-item {
  width: 250px;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.border-cell{
  width: 30px;
  height: 2px;
  background-color: #ffffff;

}
.border-active{
  background-color: rgba(70, 120, 245, 1);
}
.bar-active {
  color: rgba(70, 120, 245, 1);
}
.item-container {
  width: 750px;
  margin-bottom: 60px;
}

.cell {
  background-color: #ffffff;
}
.content {
  width: 690px;
  margin-left: 30px;
}
.a-header {
  height: 110px;
  width: 750px;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.bg {
  width: 750px;
  height: 30px;
}
.a-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 300px;
  height: 110px;
}
.a-header-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  height: 110px;
  position: absolute;
  right: 0;
}
.a-content {
  width: 690px;
  margin-left: 30px;
  margin-top: 36px;
}
.a-content-left {
  width: 400px;
}
.a-buy-btn {
  width: 200px;
  height: 60px;
  background-color: rgba(233, 233, 233, 1);
}
.a-btn-active {
  color: #ffffff;
  background-color: rgba(70, 120, 245, 1);
}
.wrapper {
  display: flex;
  flex-direction: row;
}

</style>

<script>
const dom = weex.requireModule("dom");
import { WxcTabPage, WxcPanItem, Utils, BindEnv } from "weex-ui";
import PageOne from './page-one.vue'
export default {
  components: { WxcTabPage, WxcPanItem,PageOne },
  data: () => ({
    tabTitles: [
      {
        title: "DAPP"
      },
      {
        title: "公告"
      },
      {
        title: "咨询"
      }
    ],
    index: 0,
    tabStyles: {
      bgColor: "#FFFFFF",
      titleColor: "rgba(154,156,164,1)",
      isActiveTitleBold: true,
      width: 250,
      height: 100,
      fontSize: 28
    },
    tabList: [],
    demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    tabPageHeight: 1334
  }),
  created() {
    this.tabPageHeight = Utils.env.getPageHeight();
    this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
    Vue.set(this.tabList, 0, this.demoList);
  },
  methods: {
    wxcTabPageCurrentTabSelected(e) {
      const self = this;
      self.index = e.page;
      /* Unloaded tab analog data request */
      if (!Utils.isNonEmptyArray(self.tabList[self.index])) {
        setTimeout(() => {
          Vue.set(self.tabList, self.index, self.demoList);
        }, 100);
      }
    },
    wxcPanItemPan(e) {
      if (BindEnv.supportsEBForAndroid()) {
        this.$refs["wxc-tab-page"].bindExp(e.element);
      }
    },
    tab(index) {
      return this.index === index ? "bar-active" : "";
    },
    tab_border(index) {
      return this.index === index ? "border-active" : "";
    },
    toggleSidebar(){
       const notify = weex.requireModule('notify');
       notify.send('toggle_slider')
    }
  }
};
</script>
